<template>
  <div class="component-upload-image">
    <el-upload
      action="#"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :http-request="httpRequest"
      :before-upload="beforeAvatarUpload"
      name="file"
      :disabled="disabled"
      :file-list="fileList"
      :limit="5"
      :on-exceed="handleExceed"
      :class="{'disabled':disabled}"
      style="display: inline-block; vertical-align: top">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
      <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto;">
    </el-dialog>
  </div>
</template>

<script>
import { uploadFlie } from "@/api/common";

export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [],
      picList: []
    };
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    tipmsg: {
      type: String,
    },
    theType: {
      type: Number,
    },
  },
  methods: {
    parentHandleclick(val) {
      this.fileList = [];
      this.picList = [];
      if (val != '' && val != undefined) {
        let picList = [];
        val.split(',').forEach( ele => {
          picList.push({ url: ele })
        })
        this.fileList = picList
        this.picList = this.fileList.map( ele => ele.url)
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      this.picList = fileList.map( ele => ele.url)
      let fileStr = this.picList.join(',')
      this.$emit("input", fileStr);
    },
    beforeAvatarUpload(file) {
      const isImg = file.size / 1024 / 1024 < 2
      if (!isImg) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
        
      const isType = file.type === "image/png"
      const isType2 = file.type === "image/jpeg"

      if (!isType && !isType2) {
        this.$message.error('上传头像图片格式为png或jpg')
      }
      return (isType || isType2) && isImg
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    httpRequest(data) {
      let fd = new FormData()
      fd.append('file', data.file)
      fd.append("theType", this.theType);
      uploadFlie(fd).then(res => {
        this.picList.push(res.result)
        let fileStr = this.picList.join(',')
        this.$emit("input", fileStr);
        this.$emit('after',fileStr)
      })
    }
  },
  watch: {},
};
</script>

<style scoped lang="scss">
.image {
  position: relative;
  .mask {
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
  }
  &:hover .mask {
    opacity: 1;
  }
}
/* .avatar-uploader.is-disabled {
  cursor: not-allowed;
} */
</style>

<style scoped>
/* 去掉动画 */
.component-upload-image >>> .el-upload-list__item {
  transition: none !important;
}
.disabled >>> .el-upload--picture-card {
  display: none;
}
</style>